import React from "react";
import BaseScreen from "./BaseScreen";
import ProgressView from "../view/ProgressView";
import { Actions, NameSpace } from "../model/taskModel";
import { connect } from "react-redux";
// import styles from "../css/attendance.module.css";
import styles from "../css/attendance.module.css";
import { locationTo } from "../utils/LocationUtil";
import * as locations from '../const/locations'
import { MyButton } from "../view/MyButton";
import Config from "../Config";
import DailyScreen from './components/attendance/dailyView'
import ApplyScreen from './components/attendance/applyView'
import PunchScreen from './components/attendance/punchView'
class AttendanceScreen extends BaseScreen {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0
    };
  }
  componentDidMount(){    
    document.title = '考勤'
  }
  navigate = (e) => {
    this.props.AttendTab({
      AttendTabIndex:e
    })
    this.setState({
      selectedIndex: e
    })
  }
  render() {
    const { AttendTabIndex } = this.props
    return (
      <div className={styles["home"]}>
        <div className={styles['nav_wrapper']}>
          <Navigator click={this.navigate} selectedIndex={AttendTabIndex} />
          <div 
          style={{color:Config.BaseColor,
            position:'absolute',
            right:'15px',
          }}
          onClick={()=>{locationTo(locations.STAT)}}
          >统计</div>
        </div>
        <div className={styles["wrapper"]}>
          {AttendTabIndex === 0 &&
            <PunchScreen />
          }
          {AttendTabIndex === 1 &&
            <ApplyScreen />
          }
          {AttendTabIndex === 2 &&
            <DailyScreen isSelf='0' />
          }
        </div>
      </div>
    );
  }
}

const Navigator = ({ click, selectedIndex }) => {
  return (
    <div className={styles['nav_tabs']}
      style={{ border: '1px solid ' + Config.BaseColor }}

    >
      {
        navList.map((item, index) => {
          return (<div
            key={item.name}
            onClick={() => { click(index) }}
            className={styles['nav_item']}
            style={selectedIndex === index ? selectedStyle : {}}
           >
            <div style={{
              fontSize:'26px',
              transform: 'scale(0.5)',
            }}>
            {item.name}
          </div>
          </div>)
        })
      }

    </div>
  )
}
const navList = [{
  name: '打卡'
},
{
  name: '申请'
},
{
  name: '日报'
}]
const selectedStyle = {
  color: "#fff",
  background: Config.BaseColor
}




const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    AttendTab(item) {
      let params = {
        AttendTabIndex: item.AttendTabIndex
      };
      dispatch(Actions.actionAttendTab(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(AttendanceScreen);
// export default AttendanceScreen;
